<!--///////////////////////////////////////////////////////////////////////
//                                                                       //
//   Switchy! Chrome Proxy Manager and Switcher                          //
//   Copyright (c) 2009 Mohammad Hejazi (mohammadhi at gmail d0t com)    //
//   Dual licensed under the MIT and GPL licenses.                       //
//                                                                       //
////////////////////////////////////////////////////////////////////////-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Switchy! Options</title>
	<link rel="stylesheet" href="assets/styles/options.css" type="text/css">
	<link rel="stylesheet" href="assets/styles/infoTip.css" type="text/css">
	<link rel="stylesheet" href="assets/styles/helpToolTip.css" type="text/css">
	<script src="assets/libs/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="assets/scripts/options.js" type="text/javascript"></script>
	<script src="assets/scripts/infoTip.js" type="text/javascript"></script>
	<script src="assets/scripts/helpToolTip.js" type="text/javascript"></script>
</head>
<body onload="init()">
	<table id="optionsTable">
		<tr>
			<td>
				<div id="header">
					<table>
						<tr>
							<td width="100%">
								<img src="assets/images/icon-128.png" width="50" class="title" />
								<span class="title">Switchy! Options</span>
							</td>
							<td width="100">
								<!--img src="assets/images/close.png" class="close" title="Close" onclick="closeWindow();" /-->
							</td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
		<tr id="tabsRow">
			<td>
				<div id="tabsContainer">
					<div id="tabProfiles" class="selected">
						<img src="assets/images/profile.png" valign="bottom"> Proxy Profiles
					</div>
					<div id="tabRules" class="normal">
						<img src="assets/images/filter.png" valign="bottom"> Switch Rules
					</div>
					<div id="tabNetwork" class="normal">
						<img src="assets/images/network.png" valign="bottom"> Network
					</div>
					<div id="tabGeneral" class="normal">
						<img src="assets/images/options.png" valign="bottom"> General
					</div>
				</div>
			</td>
		</tr>
		<tr height="100%">
			<td valign="top">				
				<div id="body">
					<div id="tabProfilesBody" class="tab">
						<table id="proxyTable">
							<tr>
								<th><div>Proxy Profiles</div></th>
								<td></td>
								<th><div>Profile Details</div></th>
							</tr>
							<tr>
								<td width="32%">
									<table id="proxyProfiles">
										<tr class="templateRow">
											<td width="100%">[Untitled Profile]</td>
											<td width="28">
												<div class="color" title="Profile Color">
													<div class="" onclick="changeColor();"></div>
												</div>
											</td>
											<td width="30">
												<div class="delete" title="Delete Profile" onclick="deleteRow();"></div>
											</td>
										</tr>
									</table>
									<button class="button" onclick="newRow();">
										<img src="assets/images/add.png"> New Profile
									</button>
								</td>
								<td width="13"></td>
								<td>
									<table id="profileDetails">
										<tr class="indent">
											<td><label><b>Profile Name</b></label></td>
											<td colspan="3"><input id="profileName" type="text"></td>
										</tr>
										<tr>
											<td colspan="4"><hr /></td>
										</tr>
										<tr class="section">
											<td colspan="4">
												<label>
													<input id="modeManual" type="radio" name="proxyMode">&nbsp;
													<span><b>Manual Configuration</b></span>
												</label>
											</td>
										</tr>
										<tr id="httpRow" class="indent">
											<td><label>HTTP Proxy</label></td>
											<td><input id="httpProxyHost" type="text"></td>
											<td><label>Port</label></td>
											<td><input id="httpProxyPort" type="text"></td>
										</tr>
										<tr id="sameProxyRow" class="indent">
											<td></td>
											<td colspan="3">
												<label>
													<input id="useSameProxy" type="checkbox">&nbsp;
													<span>Use the same proxy server for all protocols</span>
												</label>
											</td>
										</tr>
										<tr id="httpsRow" class="indent">
											<td><label>HTTPS Proxy</label></td>
											<td><input id="httpsProxyHost" type="text"></td>
											<td><label>Port</label></td>
											<td><input id="httpsProxyPort" type="text"></td>
										</tr>
										<tr id="ftpRow" class="indent">
											<td><label>FTP Proxy</label></td>
											<td><input id="ftpProxyHost" type="text"></td>
											<td><label>Port</label></td>
											<td><input id="ftpProxyPort" type="text"></td>
										</tr>
										<tr id="socksRow" class="indent">
											<td><label>SOCKS Host</label></td>
											<td><input id="socksProxyHost" type="text"></td>
											<td><label>Port</label></td>
											<td><input id="socksProxyPort" type="text"></td>
										</tr>
										<tr id="socksVersionRow" class="indent">
											<td></td>
											<td colspan="3">
												<label>
													<input id="socksV4" type="radio" name="socksVersion">
													<span>SOCKS v4</span>&nbsp; &nbsp; &nbsp;
												</label><label>
													<input id="socksV5" type="radio" name="socksVersion">
													<span>SOCKS v5</span>
												</label>
											</td>
										</tr>
										<tr class="section">
											<td colspan="4">
												<label>
													<input id="modeAuto" type="radio" name="proxyMode">&nbsp;
													<span><b>Automatic Configuration</b></span>
												</label>
											</td>
										</tr>
										<tr id="configUrlRow" class="indent">
											<td><label>Auto Config URL</label></td>
											<td colspan="3"><input id="proxyConfigUrl" type="text"></td>
										</tr>
										<tr>
											<td colspan="4"><hr /></td>
										</tr>
										<tr class="indent">
											<td>
												<label><b>No Proxy for</b></label>
												<span class="help">
													<p>Use semicolons ( ; ) to seperate entries.</p>
												</span>
											</td>
											<td colspan="3"><input id="proxyExceptions" type="text"></td>
										</tr>
										<!--tr>
											<td></td>
											<td colspan="3">Use semicolons ( ; ) to seperate entries</td>
										</tr-->
									</table>
								</td>
							</tr>
						</table>
					</div>

					<div id="tabNetworkBody" class="tab">
						<label>
							<div class="title"><input id="chkConnections" type="checkbox">
								Proxy for VPN/Dial-up <small><i>&nbsp;&nbsp;&nbsp;(Windows only)</i></small>
								<!--span class="help">
									<p>Allows you to switch between two proxy profiles in one click 
									(by clicking on Switchy icon).</p><hr />
									<p><b>Note:</b> After enabling this feature you won't be able to see Switchy
									main menu when clicking on Switchy icon, and so to open this Options page again 
									you should go to Chrome Extensions page (Chrome Menu > Extensions).</p>
								</span-->
							</div>
						</label>
						<table id="connectionsTable">
							<tr class="option">
								<td><label>Connection</label></td>
								<td>
									<select id="cmbConnection">
										<option value="">Test Connection</option>
									</select>
								</td>
							</tr>
						</table>
						<hr />
						<label>
							<div class="title"><input id="chkMonitorProxyChanges" type="checkbox"> 
							Monitor Proxy Changes
								<span class="help">
									<p>Repeatedly check for changes in proxy settings done by other applications, 
									and update Switchy icon to reflect those changes.</p>
								</span>														
							</div>
						</label>
						<label>
							<div class="indent"><input id="chkPreventProxyChanges" type="checkbox"> 
							Revert proxy changes done by other apps.
								<span class="help">
									<p>Revert any change in proxy settings done by other applications.</p>
								</span>														
							</div>
						</label>
					</div>

					<div id="tabGeneralBody" class="tab">
						<label>
							<div class="title"><input id="chkQuickSwitch" type="checkbox"> Quick Switch
								<span class="help">
									<p>Allows you to switch between two proxy profiles in one click 
									(by clicking on Switchy icon).</p><hr />
									<p><b>Note:</b> After enabling this feature you won't be able to see Switchy
									main menu when clicking on Switchy icon, and so to open this Options page again 
									you should go to Chrome Extensions page (Chrome Menu > Extensions).</p>
								</span>
							</div>
						</label>
						<table id="quickSwitchTable">
							<tr class="section">
								<td colspan="2">
									<label>
										<input id="rdoBinarySwitch" type="radio" name="quickSwitchType" checked="checked">
										<span><b>Binary Switch</b></span>
									</label>
								</td>
							</tr>
							<tr class="option indent">
								<td><label>Profile 1</label></td>
								<td>
									<select id="cmbProfile1">
										<option value="">Direct</option>
									</select>
								</td>
							</tr>
							<tr class="option indent">
								<td><label>Profile 2</label></td>
								<td>
									<select id="cmbProfile2">
										<option value="">Direct</option>
									</select>
								</td>
							</tr>
							<tr class="section">
								<td colspan="2">
									<label>
										<input id="rdoCycleSwitch" type="radio" name="quickSwitchType">
										<span><b>Cycle All Proxies</b></span>
									</label>
								</td>
							</tr>
						</table>
						<hr />
						<div class="title">Misc Options</div>
						<label>
							<div class="indent"><input id="chkReapplySelectedProfile" type="checkbox"> 
							Auto apply last selected proxy profile on startup.
								<span class="help">
									<p>If this option is checked Switchy will apply last user-selected 
									proxy profile on Chrome startup.</p>
								</span>														
							</div>
						</label>
						<label>
							<div class="indent"><input id="chkConfirmDeletion" type="checkbox"> 
							Confirm profile/rule deletion.
								<span class="help">
									<p>Show a confirmation dialog to confirm deletion of proxy 
									profiles or switch rules in Options page ( meta option? :) ).</p>
								</span>														
							</div>
						</label>
					</div>

					<div id="tabRulesBody" class="tab">
						<label>
							<div class="title"><input id="chkSwitchRules" type="checkbox"> Enable Switch Rules
								<span class="help">
									<p>Switch Rules specify which proxy should be used for each URL.</p><hr />
									<p>When this option is enabled you'll see two more items in main menu:</p>
									<table>
										<tr>
											<td><i>Auto Switch Mode</i></td>
											<td>clicking this item will activate Switch Rules.</td>
										</tr>
										<tr>
											<td><i>Quick Rule</i></td>
											<td>quickly add a new Switch Rule for the current website.</td>
										</tr>
									</table>
								</span>							
							</div>
						</label>
						<table id="rulesTable">
							<tr class="tableHeader">
								<th width="15%">Rule Name</th>
								<th width="35%">URL Pattern
									<span class="help">
										<p>Pattern of the page url.</p><hr />
										<table>
											<tr>
												<td colspan="2"><b>Wildcard Reference</b></td>
											</tr>
											<tr>
												<td><i>The asterisk (*) </i></td>
												<td>matches zero or more characters.</td>
											</tr>
											<tr>
												<td><i>The question mark (?) </i></td>
												<td>matches exactly one character.</td>
											</tr>
											<tr>
												<td colspan="2"><br /><b>Examples</b></td>
											</tr>
											<tr>
												<td><i>*://www.google.com/* </i></td>
												<td>Matches any URL that is on 'www.google.com' host and 
												uses any scheme (http, https ...).</td>
											</tr>
											<tr>
												<td><i>https://*.google.com/foo*bar </i></td>
												<td>Matches any URL that uses the https scheme, 
												is on a 'google.com' host (such as 'www.google.com', 
												'docs.google.com', or 'google.com'), as long as the path 
												starts with '/foo' and ends with 'bar'.</td>
											</tr>
											<tr>
												<td><i>http://example.org/foo/bar.html </i></td>
												<td>Matches exactly the specified URL.</td>
											</tr>
										</table>
									</span>								
								</th>
								<th width="13%">Pattern Type
									<span class="help">
										<p>The type of URL Pattern.<hr />
										<table>
											<tr>
												<td><i>Wildcard</i></td>
												<td>for wildcard matching.</td>
											</tr>
											<tr>
												<td><i>RegExp</i></td>
												<td>for Regular Expression matching.</td>
											</tr>
										</table>
									</span>								
								</th>
								<th width="17%">Proxy Profile
									<span class="help">
										<p>The proxy profile to be applied when this rule is matched.</p>
									</span>								
								</th>
								<th width="28"></th>
							</tr>
							<tr class="templateRow">
								<td><div title="Click to edit"><span class="ruleName">New Rule</span>
									<input name="name" type="text"></div></td>
								<td><div title="Click to edit">	
									<span class="urlPattern">&#x0b;&#x20;</span>
									<input name="urlPattern" type="text">
									<!--b class="tag">RegEx</b--></div></td>
								<td><div>
									<select name="patternType">
										<option value="wildcard">Wildcard</option>
										<option value="regex">RegExp</option>
									</select></div></td>
								<td><div>
									<select name="profileId"></select></div></td>
								<td><div class="delete" title="Delete Rule" onclick="deleteRuleRow();"></div></td>
							</tr>
							<tr class="defaultRow">
								<td><div>
									<span class="ruleName">Default Rule</span>
									<span class="help">
										<p>This rule will be applied if no other rule is matched.</p>
										<p><b>Note:</b> This rule can't be deleted.</p>
									</span>
								</div></td>
								<td colspan="2"><div><span class="urlPattern">All URLs</span></div></td>
								<!--td><div><span class="patternType">---</span></div></td-->
								<td><div>
									<select id="cmbDefaultRuleProfile" name="profileId"></select></div></td>
								<td></div></td>
							</tr>
						</table>
						<button class="button" id="btnNewRule" onclick="newRuleRow(undefined, true);">
							<img src="assets/images/add.png"> New Rule</button>
						<!--br />
						<br />
						<div class="title">Default Proxy Profile</div>
						<table class="optionGroup">
							<tr class="option indent">
								<td><label>Profile 1</label></td>
								<td>
									<select id="cmbProfile1">
										<option value="">Direct</option>
									</select>
								</td>
							</tr>
						</table-->
						<div class="spacer20"></div>
					</div>

					<hr />
					
					<div class="control">
						<table>
							<tr>
								<td width="100%">
									<button class="button" onclick="showLog();">Error Log</button>
								</td>
								<td>
									<button class="button bold" onclick="saveOptions();">Save</button>
								</td>
								<td>&nbsp;</td>
								<td>
									<button class="button bold" onclick="closeWindow();">Close</button>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>
